HTML-first UI

  • The HTML document is the primary UI representation; behavior is attached to existing HTML.

HTMX

Alpine.js / Alpine AJAX

  • Popular replacement of JQuery.

  • Library.

Alphine AJAX
<div x-data>
  <button x-on:click="$ajax.get('/users').then(html => $refs.list.innerHTML = html)">
    Load Users
  </button>
  <div x-ref="list"></div>
</div>
Alphine.js
<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <p x-show="open">Now visible</p>
</div>

Lit

  • Google.

  • Focused on Web Components.

  • Library.